<template>
  <Drawer title="选择游戏券" v-model="drawStatus" width='900' :transfer='false' id='draw-gameticket'>
    <div class="search-box">
        <Row type="flex">
          <Row type="flex"
            justify="start"
            class="search-item-left">
            <Col class="search-item" style="margin-left: 0">
              <span class="search-label">游戏券名称:</span>
              <Input placeholder="请输入" v-model='gameCouponName' :maxlength="20"></Input>
            </Col>
            <Col class="search-item">
              <span class="search-label">游戏券类型:</span>
              <Select v-model="gameticketType" @on-change="doSearch">
                <Option :value="0">请选择</Option>
                <Option :value="1">次卡</Option>
                <Option :value="2">券包</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="doReset">重置</Button>
            </Col>
          </Row>
        </Row>
      </div>
      <Table :max-height="drawTableHeight" :columns="columns" :data="relatedData" highlight-row @on-current-change='changeSelect'>
        <template slot-scope="{ row }" slot="time">
          <span>{{ row.listingTime }} - {{ row.delistingTime }}</span>
        </template>
      </Table>
      <Row type="flex"
            justify="end"
            style="padding-top:20px">
        <Col>
        <Page :total="pageObj.total"
              ref="pages"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              @on-change="changePageIndex"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total />
        </Col>
      </Row>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawStatus = false">取消</Button>
        <Button type="primary" @click="sureRelateSelect">确定</Button>
      </div>
    </Drawer>
</template>
<script>
import { mealRelatedList } from '@/api/setting'
export default {
  watch: {
    value (val) {
      if (val) {
        this.columns = [
          {
            title: ' ',
            key: 'select',
            align: 'center',
            width: 80,
            render: (h, params) => {
              let cla = ['ivu-radio']
              if (params.row.gameCouponCode === this.selectRow.gameCouponCode) {
                cla = ['ivu-radio', 'ivu-radio-checked']
              }
              return h(
                'span',
                {
                  class: cla
                },
                [
                  h('span', {
                    class: ['ivu-radio-inner']
                  })
                ]
              )
            }
          }
        ].concat(this.ticketColumns)
        if (this.selectList.length > 0) {
          this.selectRow = this.selectList[0]
        }
        this.getData()
      } else {
        this.columns = []
        this.selectRow = {}
      }
      this.drawStatus = val
    },
    drawStatus (val) {
      this.$emit('closeDraw', val)
    }
  },
  data () {
    return {
      drawTableHeight: 200,
      gameCouponName: '',
      columns: [],
      selectRow: {},
      gameticketType: 0,
      drawStatus: false,
      relatedData: [],
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  props: {
    value: {
      type: Boolean
    },
    ticketColumns: {
      type: Array,
      default: () => []
    },
    selectList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    doSearch () {
      this.pageObj.pageIndex = 1
      this.getData()
    },
    doReset () {
      this.gameCouponName = ''
      this.pageObj = {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
      this.gameticketType = 0
      this.getData()
    },
    sureRelateSelect () {
      this.$emit('selectedGame', [this.selectRow])
      this.drawStatus = false
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.getData()
    },
    changeSelect (currentRow, oldCurrentRow) {
      this.selectRow = currentRow
    },
    getData () {
      mealRelatedList({
        name: this.gameCouponName,
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id,
        status: 3, // 已上架
        salesType: 2, // 打包销售
        type: this.gameticketType === 0 ? '' : Number(this.gameticketType), // 游戏券类型
        offset: String(this.pageObj.pageSize * (this.pageObj.pageIndex - 1)),
        limit: String(this.pageObj.pageSize)
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.relatedData = result.data || []
          this.pageObj.total = result.totalCount
        } else {
          his.$Message.error(`${result.error}`)
        }
      })
    },
    calcDrawTableHeight () {
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.drawTableHeight = clientHeight - 252
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcDrawTableHeight)
  },
  mounted () {
    this.calcDrawTableHeight()
    window.addEventListener('resize', this.calcDrawTableHeight)
  }
}
</script>

<style lang="less">
#draw-gameticket{
  .demo-drawer-footer {
    width: 900px;
    position: fixed;
    z-index: 888;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .ivu-drawer-body {
    // height: calc(100% - 51px);
    padding: 0 16px;
  }
}
</style>
